<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        html, body {
            height: 100%;
        }

        body {
            background-color: #e3e4e5;
        }

        .header-container {
            width: 100%;
            height: 40px;
            background: #333;
        }

        .main {
            width: 100%;
            height: auto;
        }

        .footer-container {
            width: 100%;
            height: 160px;
            background: #f4f5f7;

            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <header class="header-container">
            header
        </header>
        <div class="main">
            <div class="row">
                <div class="col-sm">1</div>
                <div class="col-sm">2</div>
                <div class="col-sm">3</div>
                <div class="col-sm">4</div>
                <div class="col-sm">5</div>
            </div>
        </div>
        <footer class="footer-container">
            footer
        </footer>
    </div>       
</body>
</html>